<template>
	<div class="el-full el-box-column">
		<el-card class="box-card el-card-flex">
			<div slot="header" class="clearfix">
				<span>
					<i class="el-icon-warning-outline"></i>
					{{formTitle}}
				</span>
			</div>
			<div class="text item el-over-auto">
				<el-form label-width="200px" ref="addData" :model="addData">
					<el-form-item label="会议室编码：" prop="roomCode">
						<el-col :span="8">
							<el-input disabled placeholder="后台自动生成" auto-complete="off"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="会议室名称：" prop="roomName" :rules="{ required: true, message: '请填写会议室名称'}">
						<el-col :span="8">
							<el-input v-model="addData.roomName" placeholder="请填写会议室名称" auto-complete="off"></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="会议室类型：" prop="roomCatId" :rules="{ required: true, message: '请选择会议类型'}">
						<el-col :span="12">
							<!-- <el-input 
                    v-model="addData.rootCatName" 
                    placeholder="请选择会议室类型" 
                    readonly
                  >
                    <i v-show="addData.rootCatName" slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearTypeName" style="cursor: pointer;"></i>
                    <el-button slot="append" icon="el-icon-search" @click="dialogClick"></el-button>
                  </el-input> -->
							<el-input v-model="addData.roomCatId" style="display: none;"> </el-input>
							<el-tag v-for="tag in rootCatArr" :key="tag.name" closable size="medium" @close="Close1(tag)">
								{{tag.name}}
							</el-tag>
							<el-button size="small" plain @click="dialogClick">+ 添加</el-button>
						</el-col>
					</el-form-item>
					<el-form-item label="所属组织：" prop="orgName">
						<el-col :span="8">
							<el-input v-model="addData.orgName" placeholder="请填写所属组织" disabled></el-input>
						</el-col>
					</el-form-item>
					<el-form-item label="容纳：" prop="mebmers" :rules="{ required: true, message: '请输入人数'}">
						<el-col :span="8">
							<el-input-number v-model="addData.mebmers" :min="0" :max="999" maxlength="3" label="请填写人数"></el-input-number> 人
						</el-col>
					</el-form-item>
					<el-form-item label="使用范围：" prop="orgRange" :rules="{ required: true, message: '请选择使用范围'}">
						<el-col :span="24">
							<!-- <el-input 
                    v-model="addData.orgRange" 
                    placeholder="请选择使用范围" 
                    readonly
                  >
                    <i v-show="addData.orgRange" slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearOrgName" style="cursor: pointer;"></i>
                    <el-button slot="append" icon="el-icon-search" @click="principalOrg"></el-button>
                  </el-input> -->
							<el-input v-model="addData.orgRange" style="display: none;"></el-input>
							<el-tag v-for="tag in addData.orgRangeList" :key="tag.name" closable size="medium" @close="Close2(tag)">
								{{tag.name}}
							</el-tag>
							<el-button size="small" plain @click="principalOrg">+ 添加</el-button>

						</el-col>
					</el-form-item>
					<el-form-item label="位置：" prop="positionId" :rules="{ required: true, message: '请选择位置'}">
						<el-col :span="12">
							<!-- <el-input 
                    v-model="addData.positionName" 
                    placeholder="请选择位置" 
                    readonly
                  >
                    <i v-show="addData.positionName" slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearAddrName" style="cursor: pointer;"></i>
                    <el-button slot="append" icon="el-icon-search" @click="dialogClickAddr"></el-button>
                  </el-input> -->
							<el-input v-model="addData.positionId" style="display: none;">
							</el-input>
							<el-tag v-for="tag in positionArr" :key="tag.name" closable size="medium" @close="Close3(tag)">
								{{tag.name}}
							</el-tag>
							<el-button size="small" plain @click="dialogClickAddr">+ 添加</el-button>
						</el-col>
					</el-form-item>
					<el-form-item label="服务员：" prop="waiter" :rules="{ required: true, message: '请选择服务员'}">
						<el-col :span="24">
							<!-- <el-input 
                    v-model="addData.waiter" 
                    placeholder="请选择服务员" 
                    readonly
                  >
                    <i v-show="addData.waiter" slot="suffix" class="el-input__icon el-icon-circle-close" @click="clearParentName" style="cursor: pointer;"></i>
                    <el-button slot="append" icon="el-icon-search" @click="principalPeople"></el-button>
                  </el-input> -->
							<el-input v-model="addData.waiter" style="display: none;"></el-input>
							<el-tag v-for="tag in addData.waiterList" :key="tag.name" closable size="medium" @close="Close4(tag)">
								{{tag.name}}
							</el-tag>
							<el-button size="small" plain @click="principalPeople">+ 添加</el-button>
						</el-col>
					</el-form-item>
					<el-form-item label="启用：" prop="enabled" :rules="{ required: true, message: '请选择是否启用'}">
						<el-col :span="12">
							<!-- <el-switch
                    v-model="addData.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="Y">
                    </el-switch> -->
							<el-radio-group v-model="addData.enabled">
								<el-radio label="Y" border>是</el-radio>
								<el-radio label="N" border>否</el-radio>
							</el-radio-group>
						</el-col>
					</el-form-item>
					<el-form-item label="收费标准：" prop="price">
						<el-col :span="8">
							<el-input-number v-model="addData.price" :precision="0" :min="0" label="描述文字"></el-input-number> 元/小时
							<!-- <el-input v-model="addData.price" placeholder="请填写收费标准" auto-complete="off"></el-input> -->
						</el-col>
					</el-form-item>
					<el-form-item label="会议室设备：" prop="device" :rules="{ required: true, message: '请选择会议室设备'}">
						<el-col :span="24">
							<el-checkbox-group v-model="addData.device">
								<el-checkbox v-for="(item,k) in devicelist" :key="k" :label="item.deviceId" border>{{item.deviceName}}</el-checkbox>
								<!-- <el-checkbox label="1" border>投影仪</el-checkbox>
                    <el-checkbox label="2" border>液晶电视</el-checkbox>
                    <el-checkbox label="3" border>茶水</el-checkbox>
                    <el-checkbox label="4" border>话筒</el-checkbox> -->
							</el-checkbox-group>
						</el-col>
					</el-form-item>

					<el-form-item label="会议室环境：">
						<el-col :span="24">
							<el-upload ref="roomUpload" :multiple="true" list-type="picture-card" :file-list="fileList" :auto-upload="false"
							 :action="uploadByBusinessUrl" :data="fileData" :headers="roomUploadHeaders()" :on-change="roonUploadChange"
							 :on-preview="handlePreview" :on-remove="handleRemove" :on-success="roomUploadSuccess" :on-error="roomUploadError">
								<i slot="default" class="el-icon-plus"></i>
							</el-upload>
							
							<el-image class="upload-img-preview" :src="imgPreviewUrl" :preview-src-list="[imgPreviewUrl]">
							</el-image>
						</el-col>
					</el-form-item>

					<el-form-item label="备注：" prop="roomDesc">
						<el-col :span="8">
							<el-input type="textarea" :rows="3" v-model="addData.roomDesc" placeholder="请填写备注"></el-input>
						</el-col>
					</el-form-item>

				</el-form>

			</div>
			<div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
				<el-button type="primary" @click="handleCheckAdd('addData')">保 存 <i class="el-icon-document-checked"></i></el-button>
				<el-button type="danger" @click="cancelEvt()">关 闭 <i class="el-icon-close"></i></el-button>
			</div>
		</el-card>
		<selectPersonnelDalog :schedulePersonList="addData.waiterList" :dialogPersonnelVisible="dialogprincipalVisible"
		 :multiple="true" @dialogEmployeesData="dialogprincipalCheckSure" />
		<selectOrg :schedulePersonList="addData.orgRangeList" :dialogPersonnelVisible="dialogOrgVisible" :multiple="true"
		 @dialogEmployeesData="dialogOrgCheckSure"></selectOrg>
		<!-- leixing -->
		<dialogConferenceType :dialogGroupVisible="dialogGroupVisible" @dialogEmployeesData="dialogTypeCheckSure"></dialogConferenceType>

		<dialogConferenceAddr :dialogGroupVisible="dialogAddrVisible" @dialogEmployeesData="dialogAddrCheckSure"></dialogConferenceAddr>
	</div>
</template>
<script>
	import {
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane,
		Upload,
		Tag,
		Image
	} from 'element-ui'
	import {
		attachPath, //附件绝对地址
		uploadByBusinessUrl, //上传接口
		findAttchList, //获取文件列表
		preview, //预览图片
		deleteAttid //附件删除
	} from '@/api/attachCommon/attachCommon.js'

	import {
		deviceList, //设备数据
	} from '@/api/conference/Initialize.js'
	import {
		addRoom, //新增会议室
		putRoom, //修改会议室
		getRoom, //获取会议室
		nextval, //获取编码规则
		getProcessByBusinessCode, //查询业务流程配置
	} from '@/api/conference/conferenceManage.js'
	import selectPersonnelDalog from "@/components/selectPersonnel"
	import selectOrg from '../selectOrg'
	import dialogConferenceType from './dialogConferenceType'
	import dialogConferenceAddr from './dialogConferenceAddr'
	//   import drawerTree from '../contentManage/drawerTree.vue';

	import {
		getCookie//获取cookie
	} from '@/api/layout/layout.js'
	export default {
		name: "creatColumn",
		components: {
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane, // 标签页列
			"el-upload": Upload, //上传
			'el-tag': Tag, //标签
			'el-image': Image, //图片
			selectPersonnelDalog,
			selectOrg,
			dialogConferenceType,
			dialogConferenceAddr
			//   drawerTree
		},
		data() {
			return {
				uploadByBusinessUrl: uploadByBusinessUrl, //附件上传接口
				elDialogTreeKey: 3,
				imageUrl: '',
				getFile: {},
				headingId: '',
				fileData: {
					bigCatName: '会议室',
					smallCatName: '图片',
					sysCode: getCookie("sysCode") //系统编码
				},
				addData: {
					roomId: "",
					roomName: "",
					roomCatId: "",
					rootCatName: "",
					mebmers: "0",
					orgRangeList: [],
					orgRange: "",
					positionId: "",
					positionName: "",
					waiterList: [],
					waiter: "",
					enabled: "Y",
					price: "",
					deviceList: [],
					device: [],
					roomDesc: "",
					orgName: '',
					roomCode: ''

				},
				device: [],
				rootCatArr: [],
				positionArr: [],
				articleTemplateList: [], //栏目内容下拉
				addStatus: [], //栏目模板
				isShow: false,
				fileList: [],
				formTitle: '新增会议室',
				imgAttid: '',
				imgPreviewUrl: '',
				dialogVisible: false,
				dialogprincipalVisible: false, //选择人员
				dialogOrgVisible: false, //选择组织
				dialogGroupVisible: false, //选择会议类型
				dialogAddrVisible: false, //选择位置
				devicelist: []
			}
		},
		created() {
			console.log(this.uploadByBusinessUrl)
			this.formTitle = '新增会议室'
			deviceList({}).then((res) => {
				if (res.data.code == 10000) {
					this.devicelist = res.data.data.records
				}
			})

			if (this.$route.params.row == 'object') {
				//   this.addData = this.$route.params.row
				nextval('CCIT_CONFERENCE_ROOM', []).then((res) => {
					if (res.data.code == 10000) {
						this.addData.roomCode = res.data.data
						// let a = Math.ceil(Math.random()*100);
						// this.addData.roomCode = a;
					}
				})
			} else {
				this.formTitle = '编辑会议室'
				this.authorizationTabel(this.$route.params.row)
			}

		},
		methods: {
			//关闭
			cancelEvt() {
				this.$router.go(-1)
			},
			// 编辑授权表格获取单条数据事件
			authorizationTabel(id) {
				getRoom(id).then(res => {
					if (res.data.code == 10000) {
						Object.assign(this.addData, res.data.data)
						let orgRange = [],
							waiter = [],
							device = []
						this.addData.orgRangeList.forEach((v) => {
							orgRange.push(v.valName)
							v.name = v.valName
						})
						this.addData.orgRange = orgRange.join(',')
						this.addData.waiterList.forEach((v) => {
							waiter.push(v.valName)
							v.empName = v.valName
							v.name = v.valName
						})
						this.addData.waiter = waiter.join(',')
						this.addData.deviceList.forEach((v) => {
							device.push(v.propertyVal)
							// this.addData.device.push(v.propertyVal)
						})
						this.addData.device = device
						//     rootCatArr:[],
						// positionArr:[],
						this.rootCatArr.push({
							name: this.addData.rootCatName,
							id: this.addData.roomCatId
						})
						this.positionArr.push({
							name: this.addData.positionName,
							id: this.addData.positionId
						})
						// this.content = this.addData.
						//获取附件
						findAttchList({
							businessId: id,
							smallCatName: '图片'
						}).then((res) => {
							if (res.data.code == 10000) {
								if (res.data.data.records !== []) {
									let atts = res.data.data.records
									this.fileList.splice(0, this.fileList.length)
									atts.forEach((v) => {
										this.fileList.push({
											name: v.attFullName,
											url: attachPath + v.attRefId,
											attId: v.attId
										})
									})

								}

							}
						})
					}
				})
			},
			/* 组装设备列表数组*/
			transDevice() {
				let deviceListChecks = []
				this.devicelist.forEach((v) => {
					if (this.addData.device.indexOf(v.deviceId) !== -1) {
						v.propertyCat = '50acbdeecede4b8a9c55aa5d8fb65f40'
						v.propertyVal = v.deviceId
						v.valName = v.deviceName
						deviceListChecks.push(v)
					}
				})
				return deviceListChecks
			},
			/* 保存成功的回调 */
			saveCallback(res) {
				if (res.data.code == 10000) {
					for (let i = 0, len = this.fileList.length; i < len; i++) {
						if (!this.fileList[i].attId) { //如果有需要上传的附件
							this.fileData.businessId = res.data.data
							this.$refs.roomUpload.submit() // 手动触发上传
							return false
						}
					}
					Message({
						type: 'success',
						message: "保存成功"
					})
					this.$router.go(-1)
				}
			},
			/* 保存（新增或修改） */
			handleCheckAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) { //校验
						if (!this.addData.roomId) { //新增
							addRoom({
								"roomName": this.addData.roomName,
								"roomCatId": this.addData.roomCatId,
								"mebmers": this.addData.mebmers,
								"orgRangeList": this.addData.orgRangeList,
								"positionId": this.addData.positionId,
								"positionName": this.addData.positionName,
								"waiterList": this.addData.waiterList,
								"enabled": this.addData.enabled,
								"price": this.addData.price,
								"deviceList": this.transDevice(),
								"roomDesc": this.addData.roomDesc,
								"roomCode": this.addData.roomCode
							}).then(this.saveCallback)

						} else { //修改
							putRoom({ //数据请求
								"roomName": this.addData.roomName,
								"roomCatId": this.addData.roomCatId,
								"mebmers": this.addData.mebmers,
								"orgRangeList": this.addData.orgRangeList,
								"positionId": this.addData.positionId,
								"positionName": this.addData.positionName,
								"waiterList": this.addData.waiterList,
								"enabled": this.addData.enabled,
								"price": this.addData.price,
								"deviceList": this.transDevice(),
								"roomDesc": this.addData.roomDesc,
								"roomId": this.addData.roomId,
								"roomCode": this.addData.roomCode
							}).then(this.saveCallback)
						}
					}
				});

			},

			//人员弹框
			principalPeople() {
				this.dialogprincipalVisible = true;
				this.addData.waiterList.forEach((v) => {
					v.empName = v.valName
					v.personName = v.valName
					v.userId = v.propertyVal
				})
				console.log(this.addData.waiterList)
			},
			dialogprincipalCheckSure(data) {
				this.dialogprincipalVisible = false
				if (!data) {
					return
				}
				let waitername = []
				this.addData.waiterList = data
				this.addData.waiterList.forEach((v) => {
					v.propertyCat = 'e812e9571f8e4e9dae96a89acdcffa0b'
					v.propertyVal = v.userId
					// v.propertyVal = v.empId
					v.valName = v.empName
					v.name = v.empName
					waitername.push(v.empName)
				})
				// this.addData.waiter = data[0].userId
				this.addData.waiter = waitername.join(',')
			},
			Close4(tag) {
				this.addData.waiterList.splice(this.addData.waiterList.indexOf(tag), 1);
				if(this.addData.waiterList.length && this.addData.waiterList[0]){
					this.addData.waiter = this.addData.waiterList[0].valName
				}else{
					this.addData.waiter = ''
				}
			},
			clearParentName() {
				// this.addData.positionId = ''
				// this.addData.positionName = ''
				this.addData.waiterList = []
				this.addData.waiter = ''
			},
			//组织弹框
			principalOrg() {
				this.dialogOrgVisible = true
			},
			dialogOrgCheckSure(data) {
				this.dialogOrgVisible = false
				if (!data) {
					data = []
					return
				}
				//console.log(data,'data11111111')
				let orgName = []
				this.addData.orgRangeList = data
				this.addData.orgRangeList.forEach((v) => {
					v.propertyCat = 'ff4df08934f44ed1ab7056413b1762ba'
					v.propertyVal = v.orgId
					v.valName = v.orgName
					v.name = v.orgName
					orgName.push(v.orgName)
				})
				this.addData.orgRange = orgName.join(',')
			},
			Close2(tag) {
				this.addData.orgRangeList.splice(this.addData.orgRangeList.indexOf(tag), 1);
			},
			clearOrgName() {
				this.addData.orgRangeList = []
				this.addData.orgRange = ''
				// this.addData.positionId = ''
				// this.addData.positionName = ''
			},
			//会议类型
			dialogClick() {
				this.dialogGroupVisible = true
			},
			dialogTypeCheckSure(data) {
				this.dialogGroupVisible = false;
				if (!data) {
					return
				}
				this.rootCatArr = []
				this.addData.orgName = data.orgName
				this.addData.rootCatName = data.rootCatName
				this.addData.roomCatId = data.roomCatId
				this.rootCatArr.push({
					name: data.rootCatName,
					id: data.roomCatId
				})
			},
			Close1(tag) {
				this.rootCatArr.splice(this.rootCatArr.indexOf(tag), 1);
				this.addData.orgName = ''
				this.addData.rootCatName = ''
				this.addData.roomCatId = ''
			},
			clearTypeName() {
				this.addData.roomCatId = ''
				this.addData.rootCatName = ''
				// this.addData.positionId = ''
				// this.addData.positionName = ''
			},
			//位置
			dialogClickAddr() {
				this.dialogAddrVisible = true
			},
			dialogAddrCheckSure(data) {
				this.dialogAddrVisible = false
				this.dialogGroupVisible = false;
				if (!data) {
					return
				}
				this.positionArr = []
				this.addData.positionId = data.positionId
				this.addData.positionName = data.position
				this.positionArr.push({
					name: data.position,
					id: data.positionId
				})
			},
			Close3(tag) {
				this.positionArr.splice(this.positionArr.indexOf(tag), 1);
				this.addData.positionId = ''
				this.addData.positionName = ''
			},
			clearAddrName() {
				this.addData.positionId = ''
				this.addData.positionName = ''
			},
			/* 点击文件获取文件信息 */
			handlePreview(file) {
				this.imgPreviewUrl = file.url
				setTimeout(() => {
					 document.querySelector(".upload-img-preview img").click()
				}, 100)
			},
			/* 文件移除 */
			handleRemove(file) {
				if (file.attId) {
					deleteAttid(file.attId) //删除附件
				}
			},
			/* 设置上传附件的请求头（认证信息） */
			roomUploadHeaders() {
				return {
					Authorization: getCookie("Authorization") //认证信息
				}
			},
			/* 附件上传拦截 */
			roonUploadChange(file, fileList) { //文件发生改变
				var imageClass = file.name.substring(file.name.lastIndexOf(".") + 1);
				const imageStyle =
					imageClass === "jpg" ||
					imageClass === "JPG" ||
					imageClass === "png" ||
					imageClass === "PNG" ||
					imageClass === "bpm" ||
					imageClass === "BPM" ||
					imageClass === "JPEG" ||
					imageClass === "jpeg";
				if (!imageStyle) {
					Message({
						message: "上传图片只能是jpg / png / bpm/jpeg格式!",
						type: "error"
					});
					//this.fileListData = fileList.slice(1)
					fileList.pop()
					this.fileList = fileList
				} else {
					this.fileList = fileList
					return imageStyle
				}
			},
			/* 文件上传(提交)接口成功 */
			roomUploadSuccess(res) {
				if (res.code === 10000) {
					if (this.uploadMsg) {
						this.uploadMsg.close()
					}
					this.uploadMsg = Message.success('保存成功')
					this.$router.go(-1)
				}
			},
			/* 文件上传(提交)接口失败 */
			roomUploadError(err) {
				Message.error('操作失败')
			},

		}
	}
</script>
<style lang="scss" scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.el-tag--medium {
		height: 30px;
		line-height: 28px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.el-tag .el-icon-close {
		top: 0 !important;
	}
</style>
